<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String filePath = basePath+"/view/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Lexy - 个人博客 </title>
    
   	<link href="view/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="view/bac/css/font-awesome.min.css" rel="stylesheet">
    <link href="view/bac/css/animate.css" rel="stylesheet">
    <link href="view/bac/css/style.css" rel="stylesheet">
   	<link href="view/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
    
    <style type="text/css">
    	body{font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;}
    	/* ,"STXinwei" */
    	.folder-list li a {
		    color: #666666;
		    display: block;
		    padding: 10px 0;
		    font-size: 15px;
		    line-height:30px;
		}


		.layout-top{height:60px;line-height: 35px; }
		.blog_tit_img{height:auto;width:100%;max-height:200px; padding:0px 2px ; overflow:hidden ;border-radius: 5px;}
    	.blog_tit_img img{width:100%;}
    	.margin-top{margin-top: 5px ;     line-height: 2;}
    	.block-hide{display: none}
    	.sk-spinner-three-bounce div{background-color: #FFFFFF;}
    	.navbar {min-height: 50px;}
		.ibox-content{padding:10px} 
		.tit{color:#000000;width:100%;overflow: hidden}
		.tit:hover{color:#1ab394}
		.btn-page{float: left; width:35%}
    	.btn-page-style-select{width:15%;float:left;}
    	.btn-page-style{width:35%;float:left;}
    	.btn-h{height: 40px;}
    	.b-title{padding:0px 5px 5px 0px}
    	.sm-img-left{padding:0px 2px 5px 15px;width:50%;float: left}
    	.sm-img-right{padding:0px 15px 5px 2px;width:50%;float: left}
    	.title-name{padding:10px 5px 10px 15px}
    </style>
</head>
<body class=" gray-bg top-navigation">
	<div id="wrapper"  >
		<div id="page-wrapper" class="gray-bg">
			<div class="row border-bottom white-bg navbar-fixed-top">
				<nav class="navbar navbar-static-top" role="navigation">
                    <div class="navbar-header">
                        
                        <a href="#" class="navbar-brand">OFCloud</a>
                    </div>
                    <div class="navbar-collapse collapse" id="navbar">
						<ul class="nav navbar-top-links navbar-right">
							<li>
								<a id="sgin-in-model" class="layout-top">
									<span>
										<i class="fa fa-sign-in"></i>登录</span>
								</a>
							</li>
						</ul>
					</div>
                </nav>
			</div>
		</div>
	</div>
	<div id="wrapper wrapper-content animated fadeInUp" style="width:80%;margin-left:5%;margin-top: 80px;">
    	<div class="row" style="display: hidden; padding:0px 0px 10px 10px">
        	<div class="col-sm-3 " style=" ">
				<div class="ibox">
					<div class="ibox-title">
						<h5>标签</h5></div>
					<div class="ibox-content" style="padding:0px 0px 10px 10px">
						<div id="label-list">
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button></div>
					</div>
				</div>
			</div>
        	<div class="col-sm-9"  >
				<div class="col-sm-12"  id="gallery-tit" style="padding:0px">
					<c:forEach items="${gallery.list }" var="obj">
						<div class="col-sm-3 b-title">
							<div class="ibox float-e-margins">
								<div class="ibox-content">
									<a href="getGalleryContent?serialId=${obj.serial_id }" target="_blank">
										<div class="fancybox">
											<img alt="image" src="view/123.jpg">
										</div>
									</a>
									<div class="row">
										<a href="getGalleryContent?serialId=${obj.serial_id }" target="_blank">
										<!-- class="col-md-6" -->
				                            <div  class="sm-img-left">
				                               <div class="fancybox">
													<img   alt="image" src="view/123.jpg">
												</div>
				                            </div>
				                            <div  class="sm-img-right" >
				                                <div class="fancybox">
													<img class="fancybox" alt="image"  src="view/123.jpg">
												</div>
				                            </div>
										
			                            <div class="col-md-12 title-name">
			                            	<span class="tit">
			                            		${obj.blog_title}
			                            	</span>
		                            	</div>
										</a>
			                            
										<div class="col-md-6">
											<i class="fa fa-user"> ${obj.update_user_name}</i> 
										</div>
										<div class="col-md-6">
											<div class="small text-right">
												<i class="fa fa-eye"> 浏览:${obj.click_num}</i>
											</div>
										</div>
			                        </div>
								</div>
							</div>
						</div>
					</c:forEach>
					
				</div>
	    		<div class="col-sm-12">
					<div class="i-box" id="page-list">
						<div>
							<button id="file-page-left" type="button" class="btn btn-white btn-h btn-page-style ">
								<i class="fa fa-chevron-left"></i>
							</button>
							<select class="form-control btn-h btn-page-style-select" id="file-page-size" name="account">
								<c:forEach items="${pageSize}" var="obj">
									<option value="${obj.evalue}"  ${obj.evalue==obj.ekey?"selected='selected'":""}  >
									${obj.evalue}
									</option>
								</c:forEach>
							
							</select>
							<select id="file-page-select" class="form-control btn-h btn-page-style-select " name="account">
								<c:forEach  begin="1" end="${gallery.totalPage}" varStatus="i">
									<option value="${i.index}">第${i.index}页</option>
								</c:forEach>
							</select>
							<button id="file-page-right" type="button" class="btn btn-white btn-h btn-page-style">
								<i class="fa fa-chevron-right"></i>
							</button>
						</div>
					</div>
				</div>
    		</div>
		</div>
	</div>
    <footer>
         <div class="container">
         
            <div class="copy text-center">
               Copyright 2017 <a href='#'>lexy's blog</a>
            </div>
            
         </div>
    </footer>
	<div id="modal-form" class="modal inmodal fade"  role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-7 b-r">
                            <h3 class="m-t-none m-b">登录</h3>

                            <p>欢迎登录本站(⊙o⊙)</p>

                            
                        <form role="form"  id="loginForm" >
                                <div class="form-group">
                                    <label>用户名：</label>
                                    <input id="cname" name="name" placeholder="请输入用户名" class="form-control" required="" aria-required="true">
                                </div>
                                <div class="form-group">
                                    <label>密码：</label>
                                    <input id="cpwd" name="pwd"type="password" placeholder="请输入密码" class="form-control" required="" aria-required="true">
                                </div>
                                <div>
                                    <button id="sign-btn" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button" ><strong>登录</strong>
                                    </button>
                                   <label class="">
                                        <div class="icheckbox_square-green" style="position: relative;"><input type="checkbox" class="i-checks" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                        	自动登录
                               		</label>
                                </div>
                        </form>
                        </div>
                        <div class="col-sm-5">
                            <h4>还不是会员？</h4>
                            <p>您可以注册一个账户</p>
                            <p class="text-center">
                                <a href="toRegisterPage"><i class="fa fa-sign-in big-icon"></i></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 隐藏  -->
    
    <input type="hidden" id="totalPage" value="${gallery.totalPage}" >
    
	<input type="hidden" id="enFlag" value="${enFlag}">    
    
    <!-- 全局js -->
	<script src="view/plugins/jquery/jquery-1.8.3.min.js"></script>
	<script src="view/plugins/bootstrap/js/bootstrap.min.js"></script>
	
	    <!-- jQuery Validation plugin javascript-->
    <script src="view/plugins/validate/jquery.validate.min.js"></script>
    <script src="view/plugins/validate/messages_zh.min.js"></script>
    <script src="view/bac/js/ofc-pub.js"></script>
    
    <script type="text/javascript">
    
    $(function(){
    	
    	$("#file-page-right").click(function(){
    		nextPage();
    	})
    	
    })
    
    //上一页
    function prePage(){
    	
    }
    //下一页
    function nextPage(){
    	
    	var pageNumber = $("#file-page-select").val();
    	var pageSize = $("#file-page-size").val();
    	var totalPage = $("#totalPage").val();
    	var nextPageNum = parseInt(pageNumber)+1
    	if(nextPageNum<=parseInt(totalPage)){
    		var par={
    				
    				"page":nextPageNum,
    				"tagNo":''
    		}
    		var result = doPost("getGalleryPage", par);
    		console.log(result);
    		
    		var pageObj = result.detail.gallery;
    		if(pageObj!=null){
    			var list = pageObj.list;
    			var html = "";
    			$.each(list , function(i,obj){
    				
    				var split = obj.req_url.split("@");
    				var imgURL = "view/123.jpg";
    				var img_lg = imgURL;
    				var img_sm_left = imgURL;
    				var img_sm_right = imgURL;
    				
    				
    				
    				/* if(split.length>1){
    					img_lg = split[0];
    					img_sm_left = split[1];
    					img_sm_right = split[2];
    					//console.log(img_sm_left);
    				} */
    				
    				html += "<div class='col-sm-3 b-title'><div class='ibox float-e-margins'> <div class='ibox-content'>";
    				html += "<a href='getGalleryContent?serialId="+obj.serial_id+"' target='_blank'><div class='fancybox'><img alt='image' src='"+img_lg+"'></div></a><div class='row'>";
    				html += "<a href='getGalleryContent?serialId="+obj.serial_id+"' target='_blank'><div class='sm-img-left'><div class='fancybox'><img alt='image' src='"+img_sm_left+"'></div>";
    				html += "</div><div  class='sm-img-right' ><div class='fancybox'><img class='fancybox' alt='image' src='"+img_sm_right+"'></div></div>";
    				html += "<div class='col-md-12 title-name' ><span class='tit'>"+obj.blog_title+"</span>";
    				html += "</div></a><div class='col-md-6'><i class='fa fa-user'> "+obj.update_user_name+"</i></div><div class='col-md-6'>";
    				html += "<div class='small text-right'><i class='fa fa-eye'> 浏览:"+obj.click_num+"</i></div></div></div></div></div></div>";
    			});
    			$("#gallery-tit").empty();
    			$("#gallery-tit").append(html);
    			_select_option(pageObj.pageNumber);
    			_select_page_size(pageObj.pageSize);
    		}
    	}
    }
    // 选择页数
    function selectPageNumber(){
    	
    }
    // 变化pagesize
    function changePageSize(){
    	
    }
    
    function _select_option(val){
    	$("#file-page-select option[value='"+val+"']").attr("selected","selected");
    }
    function _select_page_size(val){
    	$("#file-page-size option[value='"+val+"']").attr("selected","selected");
    }
    
    
    
    
    </script>
    
    
    
    
    </body>
</html>